<template>
   <div class="my-attent">
     <ul class="list">
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>用户个人介绍文案用户个人介绍文案用户个人介绍文案</i></p><em>取消关注</em></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>用户个人介绍文案用户个人介绍文案用户个人介绍文案</i></p><em>取消关注</em></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>用户个人介绍文案用户个人介绍文案用户个人介绍文案</i></p><em>取消关注</em></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>用户个人介绍文案用户个人介绍文案用户个人介绍文案</i></p><em>取消关注</em></li>
      </ul>
   </div>
</template>

<script>

export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="less">
  .my-attent {
    padding: 20px 15px;
    .list {
       background: #FAF9FB;
       li {
         display: flex;  align-items: center; justify-content: space-between; margin-bottom:12px; background: #fff;
         img { width: 44px; height: 44px; margin-right: 8px;}
         p {
           color: #39314A; font-size: 16px; width: 200px;  margin-right: 8px;line-height: 1.8em;
           i { font-size: 12px; color: #969696; line-height: 1.6em;}
         }
         em { font-size: 14px; font-style: normal; background: #FF9405; width: 70px; line-height: 20px; text-align: center; border-radius: 3px; color: #fff;}
       }
     }
  }
</style>
